<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2119733" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">q</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">foldbox</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe721;</span>
                <div class="name">unfoldbox</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71f;</span>
                <div class="name">edit2</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71e;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71d;</span>
                <div class="name">brush</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71c;</span>
                <div class="name">expression</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71b;</span>
                <div class="name">pic</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe71a;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe719;</span>
                <div class="name">inprogress</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">notinprogress</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe717;</span>
                <div class="name">complete</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">printing</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe715;</span>
                <div class="name">weichat</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe714;</span>
                <div class="name">weichatcircle</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe713;</span>
                <div class="name">faq</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe712;</span>
                <div class="name">noticedisabled</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe711;</span>
                <div class="name">notice</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe710;</span>
                <div class="name">hangup</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70f;</span>
                <div class="name">minimize</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70e;</span>
                <div class="name">order</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70d;</span>
                <div class="name">password</div>
                <div class="code-name">&amp;#xe70d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">formlabel</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70a;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe709;</span>
                <div class="name">topping</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">groupchat</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
                <div class="name">电话</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">icon_unknown</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">icon_file</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">icon_delete</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d5;</span>
                <div class="name">icon_video</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d6;</span>
                <div class="name">icon_compressed</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d7;</span>
                <div class="name">icon_excel</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d8;</span>
                <div class="name">icon_pic</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d9;</span>
                <div class="name">icon_word</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">icon_music</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe705;</span>
                <div class="name">icon_ppt</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe706;</span>
                <div class="name">icon_pdf</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe707;</span>
                <div class="name">icon_txt</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe704;</span>
                <div class="name">薯片</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">actualcollection_surface</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">apartment_surface</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
                <div class="name">addcustomer_surface</div>
                <div class="code-name">&amp;#xe6a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6aa;</span>
                <div class="name">businesschange_surface</div>
                <div class="code-name">&amp;#xe6aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ab;</span>
                <div class="name">box_surface</div>
                <div class="code-name">&amp;#xe6ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">car_surface</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">cellphone_surface</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">chargeback_surface</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">addorder_surface</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">businessinform_surface</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">check_surface</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b2;</span>
                <div class="name">assets_surface</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b3;</span>
                <div class="name">complaintorder_surface</div>
                <div class="code-name">&amp;#xe6b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b4;</span>
                <div class="name">collection_surface</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b5;</span>
                <div class="name">copy_surface</div>
                <div class="code-name">&amp;#xe6b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b6;</span>
                <div class="name">contract_surface</div>
                <div class="code-name">&amp;#xe6b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">creditcard_surface</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b8;</span>
                <div class="name">company_surface</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b9;</span>
                <div class="name">compiaints_surface</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ba;</span>
                <div class="name">custerinform_surface</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bb;</span>
                <div class="name">date_surface</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bc;</span>
                <div class="name">creditinvestigation_surface</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bd;</span>
                <div class="name">crown_surface</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6be;</span>
                <div class="name">decline_surface</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6bf;</span>
                <div class="name">delete_surface</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">dealnumber_surface</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c1;</span>
                <div class="name">demand_surface</div>
                <div class="code-name">&amp;#xe6c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c2;</span>
                <div class="name">deletecustomer_surface</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c3;</span>
                <div class="name">disable_surface</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c4;</span>
                <div class="name">doubleunfold_surface</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c5;</span>
                <div class="name">doublefold_surface</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c6;</span>
                <div class="name">drag_square_surface</div>
                <div class="code-name">&amp;#xe6c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c7;</span>
                <div class="name">drag_surface</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c8;</span>
                <div class="name">edit_surface</div>
                <div class="code-name">&amp;#xe6c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c9;</span>
                <div class="name">ellipsis_surface</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ca;</span>
                <div class="name">electronicsinvoice_surface</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cb;</span>
                <div class="name">fastbackward_surface</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cc;</span>
                <div class="name">download_surface</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cd;</span>
                <div class="name">enterprise_surface</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ce;</span>
                <div class="name">ownoutline_surface</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6cf;</span>
                <div class="name">files_surface</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
                <div class="name">enlarge_surface</div>
                <div class="code-name">&amp;#xe6d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d1;</span>
                <div class="name">ellipsisvertical_surface</div>
                <div class="code-name">&amp;#xe6d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d2;</span>
                <div class="name">invoice_surface</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d3;</span>
                <div class="name">zoomin_surface</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
                <div class="name">zoomout_surface</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6db;</span>
                <div class="name">boxcircle</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dc;</span>
                <div class="name">profile</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6dd;</span>
                <div class="name">leftswitch</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">bigdemand</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6df;</span>
                <div class="name">messagefilled</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e0;</span>
                <div class="name">carefulfilled</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e1;</span>
                <div class="name">left</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e2;</span>
                <div class="name">informationcircle</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">fail</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e4;</span>
                <div class="name">report</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e5;</span>
                <div class="name">decline</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e6;</span>
                <div class="name">returnvisit</div>
                <div class="code-name">&amp;#xe6e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e7;</span>
                <div class="name">queryinvoice</div>
                <div class="code-name">&amp;#xe6e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">questionfilled</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">refund</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ea;</span>
                <div class="name">reducecircle</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6eb;</span>
                <div class="name">rise</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ed;</span>
                <div class="name">rightswitch</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ee;</span>
                <div class="name">restorecontacts</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ef;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f0;</span>
                <div class="name">suspend</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f1;</span>
                <div class="name">star</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f2;</span>
                <div class="name">shareholder</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f3;</span>
                <div class="name">serviccharge</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f4;</span>
                <div class="name">seal</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f5;</span>
                <div class="name">success</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f6;</span>
                <div class="name">taskmanage</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f7;</span>
                <div class="name">start</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f8;</span>
                <div class="name">taxes</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6f9;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fa;</span>
                <div class="name">urgelighting</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fb;</span>
                <div class="name">unfold</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fc;</span>
                <div class="name">view</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fd;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ff;</span>
                <div class="name">work</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe700;</span>
                <div class="name">viewoff</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe701;</span>
                <div class="name">volumeoff</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe702;</span>
                <div class="name">warning</div>
                <div class="code-name">&amp;#xe702;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">volume</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont iconwenhao"></span>
            <div class="name">
              q
            </div>
            <div class="code-name">.iconwenhao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_foldbox"></span>
            <div class="name">
              foldbox
            </div>
            <div class="code-name">.iconsurface_foldbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_unfoldbox"></span>
            <div class="name">
              unfoldbox
            </div>
            <div class="code-name">.iconsurface_unfoldbox
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_edit2"></span>
            <div class="name">
              edit2
            </div>
            <div class="code-name">.iconsurface_edit2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_plus"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.iconsurface_plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_brush"></span>
            <div class="name">
              brush
            </div>
            <div class="code-name">.iconsurface_brush
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_expression"></span>
            <div class="name">
              expression
            </div>
            <div class="code-name">.iconsurface_expression
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_pic"></span>
            <div class="name">
              pic
            </div>
            <div class="code-name">.iconsurface_pic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_video"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.iconsurface_video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_inprogress"></span>
            <div class="name">
              inprogress
            </div>
            <div class="code-name">.iconsurface_inprogress
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_notinprogress"></span>
            <div class="name">
              notinprogress
            </div>
            <div class="code-name">.iconsurface_notinprogress
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_complete"></span>
            <div class="name">
              complete
            </div>
            <div class="code-name">.iconsurface_complete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_printing"></span>
            <div class="name">
              printing
            </div>
            <div class="code-name">.iconsurface_printing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_wechat"></span>
            <div class="name">
              weichat
            </div>
            <div class="code-name">.iconsurface_wechat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_wechatcircle"></span>
            <div class="name">
              weichatcircle
            </div>
            <div class="code-name">.iconsurface_wechatcircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_faq"></span>
            <div class="name">
              faq
            </div>
            <div class="code-name">.iconsurface_faq
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_noticedisabled"></span>
            <div class="name">
              noticedisabled
            </div>
            <div class="code-name">.iconsurface_noticedisabled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_notice"></span>
            <div class="name">
              notice
            </div>
            <div class="code-name">.iconsurface_notice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_hangup"></span>
            <div class="name">
              hangup
            </div>
            <div class="code-name">.iconsurface_hangup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_minimize"></span>
            <div class="name">
              minimize
            </div>
            <div class="code-name">.iconsurface_minimize
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_order"></span>
            <div class="name">
              order
            </div>
            <div class="code-name">.iconsurface_order
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_password"></span>
            <div class="name">
              password
            </div>
            <div class="code-name">.iconsurface_password
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.iconsurface_phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_formlabel"></span>
            <div class="name">
              formlabel
            </div>
            <div class="code-name">.iconsurface_formlabel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.iconsurface_location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_topping"></span>
            <div class="name">
              topping
            </div>
            <div class="code-name">.iconsurface_topping
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_groupchat"></span>
            <div class="name">
              groupchat
            </div>
            <div class="code-name">.iconsurface_groupchat
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_dianhua"></span>
            <div class="name">
              电话
            </div>
            <div class="code-name">.iconsurface_dianhua
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_unknown"></span>
            <div class="name">
              icon_unknown
            </div>
            <div class="code-name">.iconicon_unknown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_file"></span>
            <div class="name">
              icon_file
            </div>
            <div class="code-name">.iconicon_file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_delete1"></span>
            <div class="name">
              icon_delete
            </div>
            <div class="code-name">.iconicon_delete1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_video"></span>
            <div class="name">
              icon_video
            </div>
            <div class="code-name">.iconicon_video
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_compressed"></span>
            <div class="name">
              icon_compressed
            </div>
            <div class="code-name">.iconicon_compressed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_excel"></span>
            <div class="name">
              icon_excel
            </div>
            <div class="code-name">.iconicon_excel
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_pic"></span>
            <div class="name">
              icon_pic
            </div>
            <div class="code-name">.iconicon_pic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_word"></span>
            <div class="name">
              icon_word
            </div>
            <div class="code-name">.iconicon_word
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_music"></span>
            <div class="name">
              icon_music
            </div>
            <div class="code-name">.iconicon_music
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_ppt"></span>
            <div class="name">
              icon_ppt
            </div>
            <div class="code-name">.iconicon_ppt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_pdf"></span>
            <div class="name">
              icon_pdf
            </div>
            <div class="code-name">.iconicon_pdf
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconicon_txt"></span>
            <div class="name">
              icon_txt
            </div>
            <div class="code-name">.iconicon_txt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_shupian"></span>
            <div class="name">
              薯片
            </div>
            <div class="code-name">.iconsurface_shupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_actualcollection"></span>
            <div class="name">
              actualcollection_surface
            </div>
            <div class="code-name">.iconsurface_actualcollection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_apartment"></span>
            <div class="name">
              apartment_surface
            </div>
            <div class="code-name">.iconsurface_apartment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_addcustomer"></span>
            <div class="name">
              addcustomer_surface
            </div>
            <div class="code-name">.iconsurface_addcustomer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_businesschange"></span>
            <div class="name">
              businesschange_surface
            </div>
            <div class="code-name">.iconsurface_businesschange
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_box"></span>
            <div class="name">
              box_surface
            </div>
            <div class="code-name">.iconsurface_box
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_car"></span>
            <div class="name">
              car_surface
            </div>
            <div class="code-name">.iconsurface_car
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_cellphone"></span>
            <div class="name">
              cellphone_surface
            </div>
            <div class="code-name">.iconsurface_cellphone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_chargeback"></span>
            <div class="name">
              chargeback_surface
            </div>
            <div class="code-name">.iconsurface_chargeback
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_addorder"></span>
            <div class="name">
              addorder_surface
            </div>
            <div class="code-name">.iconsurface_addorder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_businessinform"></span>
            <div class="name">
              businessinform_surface
            </div>
            <div class="code-name">.iconsurface_businessinform
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_check"></span>
            <div class="name">
              check_surface
            </div>
            <div class="code-name">.iconsurface_check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_assets"></span>
            <div class="name">
              assets_surface
            </div>
            <div class="code-name">.iconsurface_assets
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_complaintorder"></span>
            <div class="name">
              complaintorder_surface
            </div>
            <div class="code-name">.iconsurface_complaintorder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_collection"></span>
            <div class="name">
              collection_surface
            </div>
            <div class="code-name">.iconsurface_collection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_copy"></span>
            <div class="name">
              copy_surface
            </div>
            <div class="code-name">.iconsurface_copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_contract"></span>
            <div class="name">
              contract_surface
            </div>
            <div class="code-name">.iconsurface_contract
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_creditcard"></span>
            <div class="name">
              creditcard_surface
            </div>
            <div class="code-name">.iconsurface_creditcard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_company"></span>
            <div class="name">
              company_surface
            </div>
            <div class="code-name">.iconsurface_company
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_compiaints"></span>
            <div class="name">
              compiaints_surface
            </div>
            <div class="code-name">.iconsurface_compiaints
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_custerinform"></span>
            <div class="name">
              custerinform_surface
            </div>
            <div class="code-name">.iconsurface_custerinform
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_date"></span>
            <div class="name">
              date_surface
            </div>
            <div class="code-name">.iconsurface_date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_creditinvestigation"></span>
            <div class="name">
              creditinvestigation_surface
            </div>
            <div class="code-name">.iconsurface_creditinvestigation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_crown"></span>
            <div class="name">
              crown_surface
            </div>
            <div class="code-name">.iconsurface_crown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_decline"></span>
            <div class="name">
              decline_surface
            </div>
            <div class="code-name">.iconsurface_decline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_delete"></span>
            <div class="name">
              delete_surface
            </div>
            <div class="code-name">.iconsurface_delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_dealnumber"></span>
            <div class="name">
              dealnumber_surface
            </div>
            <div class="code-name">.iconsurface_dealnumber
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_demand"></span>
            <div class="name">
              demand_surface
            </div>
            <div class="code-name">.iconsurface_demand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_deletecustomer"></span>
            <div class="name">
              deletecustomer_surface
            </div>
            <div class="code-name">.iconsurface_deletecustomer
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_disable"></span>
            <div class="name">
              disable_surface
            </div>
            <div class="code-name">.iconsurface_disable
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_doubleunfold"></span>
            <div class="name">
              doubleunfold_surface
            </div>
            <div class="code-name">.iconsurface_doubleunfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_doublefold"></span>
            <div class="name">
              doublefold_surface
            </div>
            <div class="code-name">.iconsurface_doublefold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_drag_square"></span>
            <div class="name">
              drag_square_surface
            </div>
            <div class="code-name">.iconsurface_drag_square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_drag"></span>
            <div class="name">
              drag_surface
            </div>
            <div class="code-name">.iconsurface_drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_edit"></span>
            <div class="name">
              edit_surface
            </div>
            <div class="code-name">.iconsurface_edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_ellipsis"></span>
            <div class="name">
              ellipsis_surface
            </div>
            <div class="code-name">.iconsurface_ellipsis
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_electronicsinvoice"></span>
            <div class="name">
              electronicsinvoice_surface
            </div>
            <div class="code-name">.iconsurface_electronicsinvoice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_fastbackward"></span>
            <div class="name">
              fastbackward_surface
            </div>
            <div class="code-name">.iconsurface_fastbackward
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_download"></span>
            <div class="name">
              download_surface
            </div>
            <div class="code-name">.iconsurface_download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_enterprise"></span>
            <div class="name">
              enterprise_surface
            </div>
            <div class="code-name">.iconsurface_enterprise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_ownoutline"></span>
            <div class="name">
              ownoutline_surface
            </div>
            <div class="code-name">.iconsurface_ownoutline
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_files"></span>
            <div class="name">
              files_surface
            </div>
            <div class="code-name">.iconsurface_files
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_enlarge"></span>
            <div class="name">
              enlarge_surface
            </div>
            <div class="code-name">.iconsurface_enlarge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_ellipsisvertical"></span>
            <div class="name">
              ellipsisvertical_surface
            </div>
            <div class="code-name">.iconsurface_ellipsisvertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_invoice"></span>
            <div class="name">
              invoice_surface
            </div>
            <div class="code-name">.iconsurface_invoice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_zoomin"></span>
            <div class="name">
              zoomin_surface
            </div>
            <div class="code-name">.iconsurface_zoomin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_zoomout"></span>
            <div class="name">
              zoomout_surface
            </div>
            <div class="code-name">.iconsurface_zoomout
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_boxcircle"></span>
            <div class="name">
              boxcircle
            </div>
            <div class="code-name">.iconsurface_boxcircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_profile"></span>
            <div class="name">
              profile
            </div>
            <div class="code-name">.iconsurface_profile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_leftswitch"></span>
            <div class="name">
              leftswitch
            </div>
            <div class="code-name">.iconsurface_leftswitch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_bigdemand"></span>
            <div class="name">
              bigdemand
            </div>
            <div class="code-name">.iconsurface_bigdemand
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_messagefilled"></span>
            <div class="name">
              messagefilled
            </div>
            <div class="code-name">.iconsurface_messagefilled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_carefulfilled"></span>
            <div class="name">
              carefulfilled
            </div>
            <div class="code-name">.iconsurface_carefulfilled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_left"></span>
            <div class="name">
              left
            </div>
            <div class="code-name">.iconsurface_left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_informationcircle"></span>
            <div class="name">
              informationcircle
            </div>
            <div class="code-name">.iconsurface_informationcircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_fail"></span>
            <div class="name">
              fail
            </div>
            <div class="code-name">.iconsurface_fail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_report"></span>
            <div class="name">
              report
            </div>
            <div class="code-name">.iconsurface_report
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_decline2"></span>
            <div class="name">
              decline
            </div>
            <div class="code-name">.iconsurface_decline2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_returnvisit"></span>
            <div class="name">
              returnvisit
            </div>
            <div class="code-name">.iconsurface_returnvisit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_queryinvoice"></span>
            <div class="name">
              queryinvoice
            </div>
            <div class="code-name">.iconsurface_queryinvoice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_questionfilled"></span>
            <div class="name">
              questionfilled
            </div>
            <div class="code-name">.iconsurface_questionfilled
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_refund"></span>
            <div class="name">
              refund
            </div>
            <div class="code-name">.iconsurface_refund
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_reducecircle"></span>
            <div class="name">
              reducecircle
            </div>
            <div class="code-name">.iconsurface_reducecircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_rise"></span>
            <div class="name">
              rise
            </div>
            <div class="code-name">.iconsurface_rise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_rightswitch"></span>
            <div class="name">
              rightswitch
            </div>
            <div class="code-name">.iconsurface_rightswitch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_restorecontacts"></span>
            <div class="name">
              restorecontacts
            </div>
            <div class="code-name">.iconsurface_restorecontacts
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.iconsurface_right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_suspend"></span>
            <div class="name">
              suspend
            </div>
            <div class="code-name">.iconsurface_suspend
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_star"></span>
            <div class="name">
              star
            </div>
            <div class="code-name">.iconsurface_star
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_shareholder"></span>
            <div class="name">
              shareholder
            </div>
            <div class="code-name">.iconsurface_shareholder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_serviccharge"></span>
            <div class="name">
              serviccharge
            </div>
            <div class="code-name">.iconsurface_serviccharge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_seal"></span>
            <div class="name">
              seal
            </div>
            <div class="code-name">.iconsurface_seal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_success"></span>
            <div class="name">
              success
            </div>
            <div class="code-name">.iconsurface_success
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_taskmanage"></span>
            <div class="name">
              taskmanage
            </div>
            <div class="code-name">.iconsurface_taskmanage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_start"></span>
            <div class="name">
              start
            </div>
            <div class="code-name">.iconsurface_start
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_taxes"></span>
            <div class="name">
              taxes
            </div>
            <div class="code-name">.iconsurface_taxes
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.iconsurface_upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_urgelighting"></span>
            <div class="name">
              urgelighting
            </div>
            <div class="code-name">.iconsurface_urgelighting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_unfold"></span>
            <div class="name">
              unfold
            </div>
            <div class="code-name">.iconsurface_unfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_view"></span>
            <div class="name">
              view
            </div>
            <div class="code-name">.iconsurface_view
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.iconsurface_time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_work"></span>
            <div class="name">
              work
            </div>
            <div class="code-name">.iconsurface_work
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_viewoff"></span>
            <div class="name">
              viewoff
            </div>
            <div class="code-name">.iconsurface_viewoff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_volumeoff"></span>
            <div class="name">
              volumeoff
            </div>
            <div class="code-name">.iconsurface_volumeoff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_warning"></span>
            <div class="name">
              warning
            </div>
            <div class="code-name">.iconsurface_warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont iconsurface_volume"></span>
            <div class="name">
              volume
            </div>
            <div class="code-name">.iconsurface_volume
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont iconxxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconwenhao"></use>
                </svg>
                <div class="name">q</div>
                <div class="code-name">#iconwenhao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_foldbox"></use>
                </svg>
                <div class="name">foldbox</div>
                <div class="code-name">#iconsurface_foldbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_unfoldbox"></use>
                </svg>
                <div class="name">unfoldbox</div>
                <div class="code-name">#iconsurface_unfoldbox</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_edit2"></use>
                </svg>
                <div class="name">edit2</div>
                <div class="code-name">#iconsurface_edit2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_plus"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#iconsurface_plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_brush"></use>
                </svg>
                <div class="name">brush</div>
                <div class="code-name">#iconsurface_brush</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_expression"></use>
                </svg>
                <div class="name">expression</div>
                <div class="code-name">#iconsurface_expression</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_pic"></use>
                </svg>
                <div class="name">pic</div>
                <div class="code-name">#iconsurface_pic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_video"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#iconsurface_video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_inprogress"></use>
                </svg>
                <div class="name">inprogress</div>
                <div class="code-name">#iconsurface_inprogress</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_notinprogress"></use>
                </svg>
                <div class="name">notinprogress</div>
                <div class="code-name">#iconsurface_notinprogress</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_complete"></use>
                </svg>
                <div class="name">complete</div>
                <div class="code-name">#iconsurface_complete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_printing"></use>
                </svg>
                <div class="name">printing</div>
                <div class="code-name">#iconsurface_printing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_wechat"></use>
                </svg>
                <div class="name">weichat</div>
                <div class="code-name">#iconsurface_wechat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_wechatcircle"></use>
                </svg>
                <div class="name">weichatcircle</div>
                <div class="code-name">#iconsurface_wechatcircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_faq"></use>
                </svg>
                <div class="name">faq</div>
                <div class="code-name">#iconsurface_faq</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_noticedisabled"></use>
                </svg>
                <div class="name">noticedisabled</div>
                <div class="code-name">#iconsurface_noticedisabled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_notice"></use>
                </svg>
                <div class="name">notice</div>
                <div class="code-name">#iconsurface_notice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_hangup"></use>
                </svg>
                <div class="name">hangup</div>
                <div class="code-name">#iconsurface_hangup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_minimize"></use>
                </svg>
                <div class="name">minimize</div>
                <div class="code-name">#iconsurface_minimize</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_order"></use>
                </svg>
                <div class="name">order</div>
                <div class="code-name">#iconsurface_order</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_password"></use>
                </svg>
                <div class="name">password</div>
                <div class="code-name">#iconsurface_password</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#iconsurface_phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_formlabel"></use>
                </svg>
                <div class="name">formlabel</div>
                <div class="code-name">#iconsurface_formlabel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#iconsurface_location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_topping"></use>
                </svg>
                <div class="name">topping</div>
                <div class="code-name">#iconsurface_topping</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_groupchat"></use>
                </svg>
                <div class="name">groupchat</div>
                <div class="code-name">#iconsurface_groupchat</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_dianhua"></use>
                </svg>
                <div class="name">电话</div>
                <div class="code-name">#iconsurface_dianhua</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_unknown"></use>
                </svg>
                <div class="name">icon_unknown</div>
                <div class="code-name">#iconicon_unknown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_file"></use>
                </svg>
                <div class="name">icon_file</div>
                <div class="code-name">#iconicon_file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_delete1"></use>
                </svg>
                <div class="name">icon_delete</div>
                <div class="code-name">#iconicon_delete1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_video"></use>
                </svg>
                <div class="name">icon_video</div>
                <div class="code-name">#iconicon_video</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_compressed"></use>
                </svg>
                <div class="name">icon_compressed</div>
                <div class="code-name">#iconicon_compressed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_excel"></use>
                </svg>
                <div class="name">icon_excel</div>
                <div class="code-name">#iconicon_excel</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_pic"></use>
                </svg>
                <div class="name">icon_pic</div>
                <div class="code-name">#iconicon_pic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_word"></use>
                </svg>
                <div class="name">icon_word</div>
                <div class="code-name">#iconicon_word</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_music"></use>
                </svg>
                <div class="name">icon_music</div>
                <div class="code-name">#iconicon_music</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_ppt"></use>
                </svg>
                <div class="name">icon_ppt</div>
                <div class="code-name">#iconicon_ppt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_pdf"></use>
                </svg>
                <div class="name">icon_pdf</div>
                <div class="code-name">#iconicon_pdf</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconicon_txt"></use>
                </svg>
                <div class="name">icon_txt</div>
                <div class="code-name">#iconicon_txt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_shupian"></use>
                </svg>
                <div class="name">薯片</div>
                <div class="code-name">#iconsurface_shupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_actualcollection"></use>
                </svg>
                <div class="name">actualcollection_surface</div>
                <div class="code-name">#iconsurface_actualcollection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_apartment"></use>
                </svg>
                <div class="name">apartment_surface</div>
                <div class="code-name">#iconsurface_apartment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_addcustomer"></use>
                </svg>
                <div class="name">addcustomer_surface</div>
                <div class="code-name">#iconsurface_addcustomer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_businesschange"></use>
                </svg>
                <div class="name">businesschange_surface</div>
                <div class="code-name">#iconsurface_businesschange</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_box"></use>
                </svg>
                <div class="name">box_surface</div>
                <div class="code-name">#iconsurface_box</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_car"></use>
                </svg>
                <div class="name">car_surface</div>
                <div class="code-name">#iconsurface_car</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_cellphone"></use>
                </svg>
                <div class="name">cellphone_surface</div>
                <div class="code-name">#iconsurface_cellphone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_chargeback"></use>
                </svg>
                <div class="name">chargeback_surface</div>
                <div class="code-name">#iconsurface_chargeback</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_addorder"></use>
                </svg>
                <div class="name">addorder_surface</div>
                <div class="code-name">#iconsurface_addorder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_businessinform"></use>
                </svg>
                <div class="name">businessinform_surface</div>
                <div class="code-name">#iconsurface_businessinform</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_check"></use>
                </svg>
                <div class="name">check_surface</div>
                <div class="code-name">#iconsurface_check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_assets"></use>
                </svg>
                <div class="name">assets_surface</div>
                <div class="code-name">#iconsurface_assets</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_complaintorder"></use>
                </svg>
                <div class="name">complaintorder_surface</div>
                <div class="code-name">#iconsurface_complaintorder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_collection"></use>
                </svg>
                <div class="name">collection_surface</div>
                <div class="code-name">#iconsurface_collection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_copy"></use>
                </svg>
                <div class="name">copy_surface</div>
                <div class="code-name">#iconsurface_copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_contract"></use>
                </svg>
                <div class="name">contract_surface</div>
                <div class="code-name">#iconsurface_contract</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_creditcard"></use>
                </svg>
                <div class="name">creditcard_surface</div>
                <div class="code-name">#iconsurface_creditcard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_company"></use>
                </svg>
                <div class="name">company_surface</div>
                <div class="code-name">#iconsurface_company</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_compiaints"></use>
                </svg>
                <div class="name">compiaints_surface</div>
                <div class="code-name">#iconsurface_compiaints</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_custerinform"></use>
                </svg>
                <div class="name">custerinform_surface</div>
                <div class="code-name">#iconsurface_custerinform</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_date"></use>
                </svg>
                <div class="name">date_surface</div>
                <div class="code-name">#iconsurface_date</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_creditinvestigation"></use>
                </svg>
                <div class="name">creditinvestigation_surface</div>
                <div class="code-name">#iconsurface_creditinvestigation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_crown"></use>
                </svg>
                <div class="name">crown_surface</div>
                <div class="code-name">#iconsurface_crown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_decline"></use>
                </svg>
                <div class="name">decline_surface</div>
                <div class="code-name">#iconsurface_decline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_delete"></use>
                </svg>
                <div class="name">delete_surface</div>
                <div class="code-name">#iconsurface_delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_dealnumber"></use>
                </svg>
                <div class="name">dealnumber_surface</div>
                <div class="code-name">#iconsurface_dealnumber</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_demand"></use>
                </svg>
                <div class="name">demand_surface</div>
                <div class="code-name">#iconsurface_demand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_deletecustomer"></use>
                </svg>
                <div class="name">deletecustomer_surface</div>
                <div class="code-name">#iconsurface_deletecustomer</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_disable"></use>
                </svg>
                <div class="name">disable_surface</div>
                <div class="code-name">#iconsurface_disable</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_doubleunfold"></use>
                </svg>
                <div class="name">doubleunfold_surface</div>
                <div class="code-name">#iconsurface_doubleunfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_doublefold"></use>
                </svg>
                <div class="name">doublefold_surface</div>
                <div class="code-name">#iconsurface_doublefold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_drag_square"></use>
                </svg>
                <div class="name">drag_square_surface</div>
                <div class="code-name">#iconsurface_drag_square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_drag"></use>
                </svg>
                <div class="name">drag_surface</div>
                <div class="code-name">#iconsurface_drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_edit"></use>
                </svg>
                <div class="name">edit_surface</div>
                <div class="code-name">#iconsurface_edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_ellipsis"></use>
                </svg>
                <div class="name">ellipsis_surface</div>
                <div class="code-name">#iconsurface_ellipsis</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_electronicsinvoice"></use>
                </svg>
                <div class="name">electronicsinvoice_surface</div>
                <div class="code-name">#iconsurface_electronicsinvoice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_fastbackward"></use>
                </svg>
                <div class="name">fastbackward_surface</div>
                <div class="code-name">#iconsurface_fastbackward</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_download"></use>
                </svg>
                <div class="name">download_surface</div>
                <div class="code-name">#iconsurface_download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_enterprise"></use>
                </svg>
                <div class="name">enterprise_surface</div>
                <div class="code-name">#iconsurface_enterprise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_ownoutline"></use>
                </svg>
                <div class="name">ownoutline_surface</div>
                <div class="code-name">#iconsurface_ownoutline</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_files"></use>
                </svg>
                <div class="name">files_surface</div>
                <div class="code-name">#iconsurface_files</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_enlarge"></use>
                </svg>
                <div class="name">enlarge_surface</div>
                <div class="code-name">#iconsurface_enlarge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_ellipsisvertical"></use>
                </svg>
                <div class="name">ellipsisvertical_surface</div>
                <div class="code-name">#iconsurface_ellipsisvertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_invoice"></use>
                </svg>
                <div class="name">invoice_surface</div>
                <div class="code-name">#iconsurface_invoice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_zoomin"></use>
                </svg>
                <div class="name">zoomin_surface</div>
                <div class="code-name">#iconsurface_zoomin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_zoomout"></use>
                </svg>
                <div class="name">zoomout_surface</div>
                <div class="code-name">#iconsurface_zoomout</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_boxcircle"></use>
                </svg>
                <div class="name">boxcircle</div>
                <div class="code-name">#iconsurface_boxcircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_profile"></use>
                </svg>
                <div class="name">profile</div>
                <div class="code-name">#iconsurface_profile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_leftswitch"></use>
                </svg>
                <div class="name">leftswitch</div>
                <div class="code-name">#iconsurface_leftswitch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_bigdemand"></use>
                </svg>
                <div class="name">bigdemand</div>
                <div class="code-name">#iconsurface_bigdemand</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_messagefilled"></use>
                </svg>
                <div class="name">messagefilled</div>
                <div class="code-name">#iconsurface_messagefilled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_carefulfilled"></use>
                </svg>
                <div class="name">carefulfilled</div>
                <div class="code-name">#iconsurface_carefulfilled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_left"></use>
                </svg>
                <div class="name">left</div>
                <div class="code-name">#iconsurface_left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_informationcircle"></use>
                </svg>
                <div class="name">informationcircle</div>
                <div class="code-name">#iconsurface_informationcircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_fail"></use>
                </svg>
                <div class="name">fail</div>
                <div class="code-name">#iconsurface_fail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_report"></use>
                </svg>
                <div class="name">report</div>
                <div class="code-name">#iconsurface_report</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_decline2"></use>
                </svg>
                <div class="name">decline</div>
                <div class="code-name">#iconsurface_decline2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_returnvisit"></use>
                </svg>
                <div class="name">returnvisit</div>
                <div class="code-name">#iconsurface_returnvisit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_queryinvoice"></use>
                </svg>
                <div class="name">queryinvoice</div>
                <div class="code-name">#iconsurface_queryinvoice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_questionfilled"></use>
                </svg>
                <div class="name">questionfilled</div>
                <div class="code-name">#iconsurface_questionfilled</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_refund"></use>
                </svg>
                <div class="name">refund</div>
                <div class="code-name">#iconsurface_refund</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_reducecircle"></use>
                </svg>
                <div class="name">reducecircle</div>
                <div class="code-name">#iconsurface_reducecircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_rise"></use>
                </svg>
                <div class="name">rise</div>
                <div class="code-name">#iconsurface_rise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_rightswitch"></use>
                </svg>
                <div class="name">rightswitch</div>
                <div class="code-name">#iconsurface_rightswitch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_restorecontacts"></use>
                </svg>
                <div class="name">restorecontacts</div>
                <div class="code-name">#iconsurface_restorecontacts</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#iconsurface_right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_suspend"></use>
                </svg>
                <div class="name">suspend</div>
                <div class="code-name">#iconsurface_suspend</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_star"></use>
                </svg>
                <div class="name">star</div>
                <div class="code-name">#iconsurface_star</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_shareholder"></use>
                </svg>
                <div class="name">shareholder</div>
                <div class="code-name">#iconsurface_shareholder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_serviccharge"></use>
                </svg>
                <div class="name">serviccharge</div>
                <div class="code-name">#iconsurface_serviccharge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_seal"></use>
                </svg>
                <div class="name">seal</div>
                <div class="code-name">#iconsurface_seal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_success"></use>
                </svg>
                <div class="name">success</div>
                <div class="code-name">#iconsurface_success</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_taskmanage"></use>
                </svg>
                <div class="name">taskmanage</div>
                <div class="code-name">#iconsurface_taskmanage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_start"></use>
                </svg>
                <div class="name">start</div>
                <div class="code-name">#iconsurface_start</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_taxes"></use>
                </svg>
                <div class="name">taxes</div>
                <div class="code-name">#iconsurface_taxes</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#iconsurface_upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_urgelighting"></use>
                </svg>
                <div class="name">urgelighting</div>
                <div class="code-name">#iconsurface_urgelighting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_unfold"></use>
                </svg>
                <div class="name">unfold</div>
                <div class="code-name">#iconsurface_unfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_view"></use>
                </svg>
                <div class="name">view</div>
                <div class="code-name">#iconsurface_view</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#iconsurface_time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_work"></use>
                </svg>
                <div class="name">work</div>
                <div class="code-name">#iconsurface_work</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_viewoff"></use>
                </svg>
                <div class="name">viewoff</div>
                <div class="code-name">#iconsurface_viewoff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_volumeoff"></use>
                </svg>
                <div class="name">volumeoff</div>
                <div class="code-name">#iconsurface_volumeoff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_warning"></use>
                </svg>
                <div class="name">warning</div>
                <div class="code-name">#iconsurface_warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#iconsurface_volume"></use>
                </svg>
                <div class="name">volume</div>
                <div class="code-name">#iconsurface_volume</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
